<template>
	<scroll-view class="list-con" @scrolltolower="scrolltolower" :scroll-y="true">
		<uni-list>
			<uni-list-item v-for="(item,index) in value" :key="index" :clickable="true" @click="goto(item)">
				<template v-slot:body>
					<view class="row-warpper">
						<!-- 头像 start -->
						<view class="cover-con col-warpper">
							<img class="cover" :src="makeImageUrl(item)"></img>
						</view>
						<!-- 头像 end -->
						<!-- 简介 start -->
						<view class="col-warpper con">
							<scroll-view class="scroll-view" scroll-x="true">
								<view class="title">{{item.company}}</view>
								<view class="category row-warpper">
									<view class="tag" v-for="(item,index) in makeCatList(item)" :key="index">{{item}}
									</view>
								</view>
								<view class="row-warpper">参选评分:
									<uni-rate :readonly="true" :value="item.pxinfo"></uni-rate>
								</view>
							</scroll-view>
						</view>
						<!-- 简介 end -->
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</scroll-view>
</template>

<script>
	export default {
		name: "zjjgList",
		props: ["value"],
		methods: {
			/**
			 * 处理图片数据
			 * @param {Object} item
			 */
			makeImageUrl(item) {
				let picUrl = ""
				if (item.picsrc === null || item.picsrc === "" || item.picsrc === undefined) {
					picUrl = require("@/static/pic/companypic.jpg")
				} else {
					if (item.picsrc.indexOf("/images") !== -1) {
						picUrl = item.picsrc
					} else {
						picUrl = "http://222.134.12.11:8094/sys/common/static/" + item.picsrc
					}
				}
				return picUrl
			},
			/**
			 * 滑到底部
			 */
			scrolltolower() {
				this.$emit("scrolltolower")
			},
			/**
			 * 页面跳转
			 * @param {Object} item
			 */
			goto(item) {
				uni.navigateTo({
					url: 'detail?id=' + item.id
				})
			},
			/**
			 * 处理业务类型列表
			 * @param {Object} item
			 */
			makeCatList(item) {
				return item.cat.split(",")
			}
		}
	}
</script>

<style lang="less">
	.list-con {
		height: 90vh;

		.cover-con {
			height: 75px;
			// height: 100%;
			width: 100px;
			margin: 0 5px;
			justify-content: center;
			border: 1px solid #C0C0C0;
			// overflow: hidden;
			overflow-y: hidden;

			// padding: 0 15px;
			.cover {
				width: 100px;
			}
		}

		.con {
			align-items: stretch;
			justify-content: space-around;

			.scroll-view {
				width: 70vw;
			}

			.title {
				white-space: nowrap;
				font-size: 16px;
				font-weight: 700;
			}

			.category {
				white-space: nowrap;

				.tag {
					margin: 2px;
					font-size: 14px;
				}
			}
		}
	}
</style>
